import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Button, Balloon, Tag } from '@teamix/ui';
import { Header, Content, YunxiaoIcon, YunxiaoTable } from '@alife/devops-ui';
import CreateWebhooks from './createWebhooks';
import ListEmpty from 'atComponents/ListEmpty';
import ListLoading from 'atComponents/ListLoading';
import { enterPage, Perf } from 'utils/track';
import * as actions from '../actions/index';
import TableAction from './tableAction';
import '../index.scss';
import intl from '../../../../../../../../../locale';

const { Tooltip } = Balloon;

class Root extends Component {
  static propTypes = {
    webhooks: PropTypes.array,
    isLoadingTable: PropTypes.string,
  };

  componentDidMount() {
    // 组件加载完成后，获取表单项的数据
    // const fullName = pathResource.fullName.split('/')[1]
    //   ? pathResource.fullName.split('/')[1].trim()
    //   : '';
    document.title = intl.get({
      id: 'code-assets.webhooks.containers.root.WebhookYunxiaoCodeup',
      defaultMessage: 'Webhook · 云效 Codeup',
    });
    this.props.getWebhooks();

    enterPage('Organization-Settings-Webhooks', {
      sendPerf: false,
    });
  }

  renderURL = (value, index, record) => {
    return (
      <React.Fragment>
        <span className="webhooks-url">
          <Tooltip trigger={record.url} align="r">
            {record.url}
          </Tooltip>
        </span>
      </React.Fragment>
    );
  };

  renderEvent = (value, index, record) => {
    return (
      <div className="webhooks-table-trigger-event">
        {record.push_events === true && (
          <Tag>
            {intl.get({
              id: 'code-assets.webhooks.containers.root.PushEvents',
              defaultMessage: '推送事件',
            })}
          </Tag>
        )}
        {record.tag_push_events === true && (
          <Tag>
            {intl.get({
              id: 'code-assets.webhooks.containers.root.TagPushEvent',
              defaultMessage: '标签推送事件',
            })}
          </Tag>
        )}
        {record.note_events === true && (
          <Tag>
            {intl.get({
              id: 'code-assets.webhooks.containers.root.Comments',
              defaultMessage: '评论',
            })}
          </Tag>
        )}
        {record.merge_requests_events === true && (
          <Tag>
            {intl.get({
              id: 'code-assets.webhooks.containers.root.MergeRequestEvents',
              defaultMessage: '合并请求事件',
            })}
          </Tag>
        )}
      </div>
    );
  };

  renderDesc = (description) => {
    const trigger = (
      <div className="one-line-ellipsis" style={{ maxWidth: '100px' }}>
        {description}
      </div>
    );

    return (
      <Tooltip trigger={trigger} align="t">
        {description}
      </Tooltip>
    );
  };

  renderAction = (value, index, record) => {
    return <TableAction {...this.props} record={record} />;
  };

  render() {
    const { webhooks, isLoadingTable } = this.props;

    return (
      <>
        <Header
          title="Webhooks"
          description={intl.get({
            id: 'code-assets.webhooks.containers.root.AllowsDevelopersToSubscribeTo',
            defaultMessage:
              '允许开发人员通过订阅代码库事件（分支推送、标签推送等）来触发构建部署、更新镜像等操作',
          })}
          operation={
            <CreateWebhooks
              trigger={
                <Button type="secondary" className="webhooks-extra">
                  <YunxiaoIcon type="add-fill" />
                  {intl.get({
                    id: 'code-assets.webhooks.containers.root.NewWebhook',
                    defaultMessage: '新建 Webhook',
                  })}
                </Button>
              }
              {...this.props}
            />
          }
        />
        <Content>
          {!isLoadingTable ? (
            <div>
              {webhooks && webhooks.length > 0 ? (
                <YunxiaoTable dataSource={webhooks} hasBorder className="webhooks-table">
                  <YunxiaoTable.Column title="URL" cell={this.renderURL} />

                  <YunxiaoTable.Column
                    title={intl.get({
                      id: 'code-assets.webhooks.containers.root.Description',
                      defaultMessage: '描述',
                    })}
                    dataIndex="description"
                    cell={this.renderDesc}
                  />

                  <YunxiaoTable.Column
                    title={intl.get({
                      id: 'code-assets.webhooks.containers.root.TriggerEvent',
                      defaultMessage: '触发事件',
                    })}
                    cell={this.renderEvent}
                  />
                  <YunxiaoTable.Column
                    title={intl.get({
                      id: 'code-assets.webhooks.containers.root.Operation',
                      defaultMessage: '操作',
                    })}
                    cell={this.renderAction}
                  />
                </YunxiaoTable>
              ) : (
                <ListEmpty
                  type="card"
                  size="small"
                  content=""
                  description={intl.get({
                    id: 'code-assets.webhooks.containers.root.NoWebhook',
                    defaultMessage: '暂无 webhook',
                  })}
                  image="none"
                  className="no-content no-btns"
                />
              )}

              <Perf page="Organization-Settings-Webhooks" />
            </div>
          ) : (
            <ListLoading style={{ textAlign: 'center' }} />
          )}
        </Content>
      </>
    );
  }
}

export default connect(
  (state) => state.organization.settings.webhooks,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
